<template>
  <BaseDialog title="编辑微信群" :handleCancel="handleCancel" v-model:dialogVisible="props.dialogVisible">
    <BaseForm
      ref="baseForm"
      type="rule"
      :handleOk="handleOk"
      :handleCancel="handleCancel"
      :items="formItems"
      v-model:form="ruleForm"
      :rules="rules"
      :refresh="handleSearch"
      label-width="120px"
    >
      <template #select-pop>
        <CommunityTags v-model:list="communityList" />
      </template>
    </BaseForm>
  </BaseDialog>
  <AssociatedCommunity
    v-if="visibleAssociatedCommunity"
    v-model:dialogVisible="visibleAssociatedCommunity"
    v-model:communityDtoList="communityList"
    :item="item"
    title="相关片区/村社"
    :type="1"
    :showManager="false"
    :showLock="true"
  ></AssociatedCommunity>
</template>

<script setup lang="ts">
import CommunityTags from '@/components/AssociatedCommunity/communityTags.vue';
import AssociatedCommunity from '@/components/AssociatedCommunity/index.vue';
import { basicConfigService } from '@/api/basicConfig';

const props = defineProps({
  dialogVisible: {
    type: Boolean,
  },
  item: {
    type: Object,
  },
  handleSearch: {
    type: Function,
  },
  options: {
    type: Object,
  },
});
const visibleAssociatedCommunity = ref(false);
const emit = defineEmits(['update:dialogVisible']);
const handleFn = () => {
  visibleAssociatedCommunity.value = true;
};
const baseForm = ref();
watch(visibleAssociatedCommunity, (val) => {
  if (val) {
    baseForm.value.selectPop[0].blur();
    // if (baseForm.value && baseForm.value.selectPop && baseForm.value.selectPop.length > 0) {
    //   baseForm.value.selectPop[0].blur()
    // }
  } else {
  }
});
const formItems = ref([
  {
    name: '微信群名称',
    key: 'wxGroupName',
    type: 'input',
    disabled: true,
  },
  {
    name: '关联网格经理',
    key: 'managerIdList',
    type: 'select',
    placeholder: '请选择关联网格经理,单选',
    options: props.options,
    multiple: false,
  },
  {
    name: '关联管理员',
    key: 'staffManagerIdList',
    type: 'select',
    placeholder: '请选择关联管理员，多选',
    options: [],
    multiple: true,
  },
  {
    name: '相关片区/村社',
    key: 'communityDtoList',
    type: 'select-pop',
    handleFn: handleFn,
    placeholder: '请选择相关片区/村社，多选',
  },
  {
    name: '备注',
    key: 'remark',
    type: 'textarea',
  },
  {
    name: '状态',
    key: 'isDisable',
    type: 'switch',
    activeValue: 0,
    inactiveValue: 1,
  },
]);
const rules = reactive({
  wxGroupName: [{ required: true, message: '请输入', trigger: 'change' }],
  managerIdList: [{ required: true, message: '请选择', trigger: 'change' }],
  communityDtoList: [{ required: true, message: '请选择', trigger: 'change' }],
});
const communityList = ref([]);
const ruleForm = ref({
  groupId: '',
  wxGroupName: '',
  managerIdList: '',
  staffManagerIdList: [],
  communityDtoList: '',
  remark: '',
  isDisable: '',
});
watch(
  () => [...communityList.value],
  () => {
    ruleForm.value.communityDtoList = communityList.value.map((e) => e.communityName).join(',');
  },
);
const handleOk = (data) => {
  const params = JSON.parse(JSON.stringify(ruleForm.value));
  params.managerIdList = [params.managerIdList];

  return basicConfigService.groupUpdate({
    data: {
      ...params,
      communityIdList: communityList.value.map((e) => e.communityId),
      communityDtoList: undefined,
    },
  });
};

const handleCancel = () => {
  emit('update:dialogVisible', false);
};

const getAdminList = async () => {
  const res = await basicConfigService.getAllAdmin({});
  if (res.success) {
    let list = [];
    res.data.forEach((item) => {
      list.push({
        label: item.managerName,
        value: item.managerId,
      });
    });
    formItems.value[2].options = list;
  }
};
onMounted(() => {
  getAdminList();

  if (props.item.groupId) {
    console.log(JSON.parse(JSON.stringify(props.item.managerDtoList)), 'props.item.managerDtoList');
    ruleForm.value.groupId = props.item.groupId;
    ruleForm.value.wxGroupName = props.item.wxGroupName;
    ruleForm.value.managerIdList = props.item.managerDtoList ? props.item.managerDtoList[0].managerId : [];
    ruleForm.value.staffManagerIdList = props.item.staffManagerDtoList
      ? props.item.staffManagerDtoList.map((n) => n.managerId)
      : [];
    communityList.value = [...props.item.communityDtoList];
    ruleForm.value.isDisable = props.item.isDisable;
    ruleForm.value.remark = props.item.remark;
  }
  //console.log(JSON.parse(JSON.stringify(ruleForm.value.managerIdList)), 'ruleForm.value.managerIdList');
});
</script>

<style lang="scss" scoped></style>
